<template>
  <!-- 页面布局 -->
  <el-container style="height: 100vh;">
    <!-- 页面头部 -->
    <el-header style="background-color: #333; color: #fff; line-height: 60px;position: fixed; width: 100%; top: 0; z-index: 1000">
      <!-- 头部内容 -->
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 20px;">
        <!-- 左侧标题 -->
        <div style="font-size: 18px; font-weight: bold;">球员管理系统</div>
        <!-- 右侧下拉菜单 -->
        <el-dropdown>
          <span class="el-dropdown-link">
            <!-- 用户图标 -->
            <el-icon><User /></el-icon>
            <!-- 用户名 -->
            {{ name }}
            <!-- 职位 -->
            <span v-if="role" style="margin-left: 8px; font-size: 15px; color: #aaa;">({{ role }})</span>
            <!-- 下拉箭头图标 -->
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </span>
          <!-- 下拉菜单内容 -->
          <template #dropdown>
            <el-dropdown-menu>
              <!-- 退出系统按钮 -->
              <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 页面主体内容 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px" style="background-color: #444; color: #fff; margin-top: 50px;">
        <!-- 菜单 -->
        <el-menu
            default-active="/admin/Main/adminhome"
            class="el-menu-vertical-demo"
            background-color="#444"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
          <!-- 首页菜单项 -->
          <el-menu-item index="/admin/Main/adminhome">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Operation /></el-icon>
              <span>个人信息管理</span>
            </template>
            <el-menu-item :index="`/admin/Main/personal?username=${username}`"><el-icon><Notebook /></el-icon>个人信息</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Operation /></el-icon>
              <span>球员信息管理</span>
            </template>
            <el-menu-item index="/admin/Main/admin"><el-icon><Tickets /></el-icon>球员管理</el-menu-item>
            <el-menu-item index="/admin/Main/playerecharts"><el-icon><Tickets /></el-icon>球员图表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Operation /></el-icon>
              <span>教练信息管理</span>
            </template>
            <el-menu-item index="/admin/Main/admin2"><el-icon><Tickets /></el-icon>教练管理</el-menu-item>
            <el-menu-item index="/admin/Main/coachecharts"><el-icon><Tickets /></el-icon>教练图表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><Operation /></el-icon>
              <span>球员数据管理</span>
            </template>
            <el-menu-item index="/admin/Main/admin3"><el-icon><Tickets /></el-icon>球员数据</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><Operation /></el-icon>
              <span>请假申请管理</span>
            </template>
            <el-menu-item index="/admin/Main/LeaveApplicant"><el-icon><Tickets /></el-icon>请假审批</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <el-icon><Notification /></el-icon>
              <span>训练安排管理</span>
            </template>
            <el-menu-item index="/admin/Main/TrainingSchedule3"><el-icon><Tickets /></el-icon>训练安排</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="7">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>今日资讯管理</span>
            </template>
            <el-menu-item :index="`/admin/Main/News?role=${role}&name=${name}`"><el-icon><Memo /></el-icon>今日资讯</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="8">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>今日公告管理</span>
            </template>
            <el-menu-item index="/admin/Main/announcement"><el-icon><Memo /></el-icon>今日公告</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="9">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>比赛信息管理</span>
            </template>
            <el-menu-item index="/admin/Main/game"><el-icon><Memo /></el-icon>比赛信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 主要内容区域 -->
      <el-main class="main-content" style="margin-top: 20px;">
        <!-- 路由视图 -->
        <router-view :key="$route.fullPath" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { useRouter, useRoute } from 'vue-router';
import { ArrowDown, ChatLineSquare, Finished, Grid, HomeFilled, HotWater, Memo, Notebook, Notification, Operation, Postcard, Tickets, User } from "@element-plus/icons-vue";

export default {
  components: { Finished, Postcard, Memo, ChatLineSquare, HotWater, Notebook, Tickets, User, ArrowDown, Notification, Operation, Grid, HomeFilled },

  setup() {
    // 路由相关
    const router = useRouter();
    const route = useRoute();
    const username = route.query.username || '';
    const name = route.query.name || ''; // 修改这里，从 query 中获取 name
    // 角色
    const role = route.query.role || '';

    // 将角色英文名字映射为中文
    const roleMap = {
      admin: '管理员',
      player: '球员',
      coach: '教练'
    };

    // 处理菜单选项选择
    const handleSelect = (index) => {
      router.push(index);
    };

    // 处理退出系统逻辑
    const logout = () => {
      router.push('/');
    };

    return {
      handleSelect,
      logout,
      username,
      name, // 使用 name 替代 username
      role: roleMap[role] || '', // 使用映射后的中文角色名
    };
  },
};
</script>

<style scoped>
.main-content {
  flex: 1;
  background-image: url('src/images/2.jpg'); /* 确保路径正确 */
  background-size: cover;
  background-position: center;
  overflow: auto;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
  border-right: none;
}
</style>
